<template>
  <div class="page-container">
    <h2 style="margin: 5px 0 15px">候选人</h2>
    <el-row justify="space-between" style="margin-bottom: 5px">
      <el-col :span="12">
        <el-input v-model="params.name" placeholder="请输入姓名/手机号" size="small" clearable @keydown.enter.native="getTableList" style="width: 160px">
          <template #suffix>
            <el-icon :size="15" color="var(--el-color-primary)">
              <ele-Search/>
            </el-icon>
          </template>
        </el-input>
        <el-popover placement="bottom-start" :width="910" trigger="click">
          <template #reference>
            <el-button size="small" :icon="Filter" style="margin-left: 10px">综合筛选</el-button>
          </template>
          <el-row>
            <el-row>
              <span style="line-height: 24px">职位</span>
              <el-select size="small" v-model="params.recruitPostId" placeholder="请选择" clearable style="margin: 0 20px 0 10px;width: 120px">
                <el-option v-for="item in recruitPostList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
              <span style="line-height: 24px">招聘负责人</span>
              <el-select size="small" v-model="params.liableId" placeholder="请选择" clearable style="margin: 0 20px 0 10px;width: 120px">
                <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
              <span style="line-height: 24px">性别</span>
              <el-select size="small" v-model="params.sex" placeholder="请选择" clearable style="margin: 0 20px 0 10px;width: 120px">
                <el-option v-for="item in dictMap['SexType']" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
              <span style="line-height: 24px">年龄</span>
              <el-input-number v-model="params.minAge" :min="0" :max="200" :controls="false" size="small" style="width: 60px;margin-left: 10px"/>&nbsp;&nbsp;-&nbsp;&nbsp;
              <el-input-number v-model="params.maxAge" :min="0" :max="200" :controls="false" size="small" style="width: 60px"/>
            </el-row>
            <el-row style="margin-top: 10px">
              <span style="line-height: 24px">工作年限</span>
              <el-input-number v-model="params.minWorkAge" :min="0" :max="99" :controls="false" size="small" style="width: 60px;margin-left: 10px"/>&nbsp;&nbsp;-&nbsp;&nbsp;
              <el-input-number v-model="params.maxWorkAge" :min="0" :max="99" :controls="false" size="small" style="width: 60px;margin-right: 20px"/>
              <span style="line-height: 24px">学历</span>
              <el-select size="small" v-model="params.eduLevel" placeholder="请选择" clearable style="margin: 0 20px 0 10px;width: 120px">
                <el-option v-for="item in dictMap['EducationLevel']" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
              <span style="line-height: 24px">毕业院校</span>
              <el-input v-model="params.graduatedSchool" placeholder="请输入" size="small" clearable style="width: 180px;margin: 0 20px 0 10px"/>
              <span style="line-height: 24px">招聘渠道</span>
              <el-select size="small" v-model="params.recruitChannel" placeholder="请选择" clearable style="margin-left: 10px;width: 120px">
                <el-option v-for="item in dictMap['RecruitChannel']" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-row>
            <el-row style="margin-top: 10px">
              <span style="line-height: 24px">最近工作单位</span>
              <el-input v-model="params.lastWorkUnit" placeholder="请输入" size="small" clearable style="width: 180px;margin: 0 20px 0 10px"/>
              <span style="line-height: 24px">最后面试时间</span>
              <el-date-picker
                  v-model="interviewDateRange"
                  type="daterange"
                  style="width: 260px;margin: 0 20px 0 10px"
                  value-format="YYYY-MM-DD"
                  range-separator="至"
                  start-placeholder="范围起始时间"
                  end-placeholder="范围结束时间"
                  size="small"
                  @change="interviewDateChange"
              />
              <span style="line-height: 24px">创建人</span>
              <el-select size="small" v-model="params.creator" placeholder="请选择" clearable style="margin: 0 20px 0 10px;width: 120px">
                <el-option v-for="item in userList" :key="item.username" :label="item.nickname" :value="item.username"/>
              </el-select>
            </el-row>
            <el-row style="margin-top: 10px">
              <span style="line-height: 24px">创建时间</span>
              <el-date-picker
                  v-model="params.createDateRange"
                  type="daterange"
                  style="width: 260px;margin: 0 20px 0 10px"
                  value-format="YYYY-MM-DD"
                  range-separator="至"
                  start-placeholder="范围起始时间"
                  end-placeholder="范围结束时间"
                  size="small"
                  @change="createDateChange"
              />
              <el-button type="primary" size="small" @click="getTableList">确定</el-button>
              <el-button size="small" @click="resetParams">重置</el-button>
            </el-row>
          </el-row>
        </el-popover>
        <el-button type="primary" size="small" @click="openCreate">新建候选人</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="19">
        <el-card :body-style="{padding: `10px 5px`}" shadow="none">
          <el-row justify="space-between">
            <template v-for="(item, index) in topStateList" :key="item.value">
              <div :class="['stateCell', item.value === params.state ? 'state-active' : '']" @click="stateChange(item.value)">
                <h3 class="state-num">{{ item.total }}</h3>
                <h3 class="state-name">{{ item.name }}</h3>
              </div>
              <span v-if="index < topStateList.length - 1" class="state-arrow"></span>
            </template>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="2" style="margin: 0 20px">
        <el-card :body-style="{padding: `10px 5px`}" shadow="none">
          <div :class="['stateCell', '-1' === params.state ? 'state-active' : '']" @click="stateChange('-1')">
            <h3 class="state-num">{{ outState.total }}</h3>
            <h3 class="state-name">{{ outState.name }}</h3>
          </div>
        </el-card>
      </el-col>
      <el-col :span="2">
        <el-card :body-style="{padding: `10px 5px`}" shadow="none">
          <div :class="['stateCell', '-2' === params.state ? 'state-active' : '']" @click="stateChange('-2')">
            <h3 class="state-num">{{ backState.total }}</h3>
            <h3 class="state-name">{{ backState.name }}</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="table-box">
      <!-- 待初筛、初筛通过显示的表格 -->
      <el-table :data="tableList" size="small" class="tableList" v-show="params.state === '0' || params.state === '1'">
        <el-table-column prop="name" label="姓名" min-width="90px" fixed="left">
          <template v-slot="scope">
            <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="recruitPostName" label="应聘职位" width="100px"/>
        <el-table-column prop="interviewerNames" label="初筛评估人" width="150px" :show-overflow-tooltip="true"/>
        <el-table-column prop="phone" label="手机号" width="120px"/>
        <el-table-column label="性别" width="100px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['SexType']" :key="item.value" v-show="item.value === row.sex">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" min-width="100px"/>
        <el-table-column label="目前状态" width="100px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['CandidateJobState']" :key="item.value" v-show="item.value === row.jobState">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="arriveDate" label="可到岗时间" width="120px"/>
        <el-table-column label="工作经验" width="130px">
          <template v-slot="{row}">{{ row.workExperience ? row.workExperience + '年' : '--' }}</template>
        </el-table-column>
        <el-table-column label="期望月薪" width="120px">
          <template v-slot="{row}">
            <span v-if="row.salaryInterview === '1'">面谈</span>
            <span v-else>{{ row.expectSalaryStart }} ~ {{ row.expectSalaryEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学历" width="130px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['EducationLevel']" :key="item.value" v-show="item.value === row.eduLevel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="major" label="专业" width="160px"/>
        <el-table-column prop="graduatedSchool" label="毕业院校" width="120px"/>
        <el-table-column prop="lastWorkUnit" label="最近工作单位" width="160px"/>
        <el-table-column prop="lastPosition" label="最近职位" width="160px"/>
        <el-table-column prop="liveAddress" label="现居住地" width="120px"/>
        <el-table-column prop="email" label="邮箱" width="130px"/>
        <el-table-column prop="liableName" label="招聘负责人" width="120px"/>
        <el-table-column label="招聘渠道" width="120px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['RecruitChannel']" :key="item.value" v-show="item.value === row.recruitChannel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="oaDeptName" label="用人部门" width="160px"/>
        <el-table-column prop="creator" label="创建人" min-width="100px"/>
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
      </el-table>

      <!-- 已安排面试、已面试、面试通过 -->
      <el-table :data="tableList" size="small" class="tableList" v-show="params.state === '2' || params.state === '3' || params.state === '4'">
        <el-table-column prop="name" label="姓名" min-width="120px" fixed="left">
          <template v-slot="scope">
            <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="recruitPostName" label="应聘职位" width="100px"/>
        <el-table-column prop="interviewNum" label="面试轮次" width="100px"/>
        <el-table-column prop="interviewEvaluateNum" label="面试评价数" width="100px"/>
        <el-table-column prop="lastInterviewDate" label="面试时间" width="100px"/>
        <el-table-column label="面试官" width="150px" :show-overflow-tooltip="true">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.interviewerNames : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试方式" width="100px">
          <template v-slot="{row}">
                        <span v-if="row.lastInterviewRecord">
                          <span v-for="item in dictMap['InterviewType']" :key="item.value" v-show="item.value === row.lastInterviewRecord.type">{{ item.name }}</span>
                        </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="面试地址" width="150px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.address : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试联系人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.contactName : '--' }}</template>
        </el-table-column>
        <el-table-column label="新建面试人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.creatorName : '--' }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120px"/>
        <el-table-column label="性别" width="100px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['SexType']" :key="item.value" v-show="item.value === row.sex">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" min-width="100px"/>
        <el-table-column label="目前状态" width="100px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['CandidateJobState']" :key="item.value" v-show="item.value === row.jobState">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="arriveDate" label="可到岗时间" width="120px"/>
        <el-table-column label="工作经验" width="130px">
          <template v-slot="{row}">{{ row.workExperience ? row.workExperience + '年' : '--' }}</template>
        </el-table-column>
        <el-table-column label="期望月薪" width="120px">
          <template v-slot="{row}">
            <span v-if="row.salaryInterview === '1'">面谈</span>
            <span v-else>{{ row.expectSalaryStart }} ~ {{ row.expectSalaryEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学历" width="130px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['EducationLevel']" :key="item.value" v-show="item.value === row.eduLevel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="major" label="专业" width="160px"/>
        <el-table-column prop="graduatedSchool" label="毕业院校" width="120px"/>
        <el-table-column prop="lastWorkUnit" label="最近工作单位" width="160px"/>
        <el-table-column prop="lastPosition" label="最近职位" width="160px"/>
        <el-table-column prop="liveAddress" label="现居住地" width="120px"/>
        <el-table-column prop="email" label="邮箱" width="130px"/>
        <el-table-column prop="liableName" label="招聘负责人" width="120px"/>
        <el-table-column label="招聘渠道" width="120px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['RecruitChannel']" :key="item.value" v-show="item.value === row.recruitChannel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="oaDeptName" label="用人部门" width="160px"/>
        <el-table-column prop="creator" label="创建人" min-width="100px"/>
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
      </el-table>

      <!-- 已发offer、待入职 -->
      <el-table :data="tableList" size="small" class="tableList" v-show="params.state === '5' || params.state === '6'">
        <el-table-column prop="name" label="姓名" min-width="120px" fixed="left">
          <template v-slot="scope">
            <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="recruitPostName" label="应聘职位" width="100px"/>
        <el-table-column label="入职部门" width="100px">
          <template v-slot="{row}">{{ row.candidateOffer ? row.candidateOffer.oaDeptName : '--' }}</template>
        </el-table-column>
        <el-table-column label="入职职位" width="100px">
          <template v-slot="{row}">{{ row.candidateOffer ? row.candidateOffer.oaPositionName : '--' }}</template>
        </el-table-column>
        <el-table-column label="预计入职日期" width="150px">
          <template v-slot="{row}">{{ row.candidateOffer ? row.candidateOffer.estimateJoinedDate : '--' }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120px"/>
        <el-table-column label="性别" width="100px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['SexType']" :key="item.value" v-show="item.value === row.sex">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" min-width="100px"/>
        <el-table-column label="工作经验" width="130px">
          <template v-slot="{row}">{{ row.workExperience ? row.workExperience + '年' : '--' }}</template>
        </el-table-column>
        <el-table-column label="期望月薪" width="120px">
          <template v-slot="{row}">
            <span v-if="row.salaryInterview === '1'">面谈</span>
            <span v-else>{{ row.expectSalaryStart }} ~ {{ row.expectSalaryEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学历" width="130px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['EducationLevel']" :key="item.value" v-show="item.value === row.eduLevel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="major" label="专业" width="160px"/>
        <el-table-column prop="graduatedSchool" label="毕业院校" width="120px"/>
        <el-table-column prop="lastWorkUnit" label="最近工作单位" width="160px"/>
        <el-table-column prop="lastPosition" label="最近职位" width="160px"/>
        <el-table-column prop="liveAddress" label="现居住地" width="120px"/>
        <el-table-column prop="email" label="邮箱" width="130px"/>
        <el-table-column prop="interviewNum" label="面试轮次" width="100px"/>
        <el-table-column prop="interviewEvaluateNum" label="面试评价数" width="100px"/>
        <el-table-column prop="lastInterviewDate" label="面试时间" width="100px"/>
        <el-table-column label="面试官" width="150px" :show-overflow-tooltip="true">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.interviewerNames : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试方式" width="100px">
          <template v-slot="{row}">
                        <span v-if="row.lastInterviewRecord">
                          <span v-for="item in dictMap['InterviewType']" :key="item.value" v-show="item.value === row.lastInterviewRecord.type">{{ item.name }}</span>
                        </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="面试地址" width="150px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.address : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试联系人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.contactName : '--' }}</template>
        </el-table-column>
        <el-table-column label="新建面试人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.creatorName : '--' }}</template>
        </el-table-column>
        <el-table-column prop="liableName" label="招聘负责人" width="120px"/>
        <el-table-column label="招聘渠道" width="120px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['RecruitChannel']" :key="item.value" v-show="item.value === row.recruitChannel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="oaDeptName" label="用人部门" width="160px"/>
        <el-table-column prop="creator" label="创建人" min-width="100px"/>
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
      </el-table>

      <!-- 已入职 -->
      <el-table :data="tableList" size="small" class="tableList" v-show="params.state === '7'">
        <el-table-column prop="name" label="姓名" min-width="120px" fixed="left">
          <template v-slot="scope">
            <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="recruitPostName" label="应聘职位" width="100px"/>
        <el-table-column label="入职职位" width="100px">
          <template v-slot="{row}">{{ row.postName || '--' }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120px"/>
        <el-table-column label="性别" width="100px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['SexType']" :key="item.value" v-show="item.value === row.sex">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" min-width="100px"/>
        <el-table-column label="工作经验" width="130px">
          <template v-slot="{row}">{{ row.workExperience ? row.workExperience + '年' : '--' }}</template>
        </el-table-column>
        <el-table-column label="期望月薪" width="120px">
          <template v-slot="{row}">
            <span v-if="row.salaryInterview === '1'">面谈</span>
            <span v-else>{{ row.expectSalaryStart }} ~ {{ row.expectSalaryEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学历" width="130px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['EducationLevel']" :key="item.value" v-show="item.value === row.eduLevel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="major" label="专业" width="160px"/>
        <el-table-column prop="graduatedSchool" label="毕业院校" width="120px"/>
        <el-table-column prop="lastWorkUnit" label="最近工作单位" width="160px"/>
        <el-table-column prop="lastPosition" label="最近职位" width="160px"/>
        <el-table-column prop="liveAddress" label="现居住地" width="120px"/>
        <el-table-column prop="email" label="邮箱" width="130px"/>
        <el-table-column prop="interviewNum" label="面试轮次" width="100px"/>
        <el-table-column prop="interviewEvaluateNum" label="面试评价数" width="100px"/>
        <el-table-column prop="lastInterviewDate" label="面试时间" width="100px"/>
        <el-table-column label="面试官" width="150px" :show-overflow-tooltip="true">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.interviewerNames : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试方式" width="100px">
          <template v-slot="{row}">
                        <span v-if="row.lastInterviewRecord">
                          <span v-for="item in dictMap['InterviewType']" :key="item.value" v-show="item.value === row.lastInterviewRecord.type">{{ item.name }}</span>
                        </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="面试地址" width="150px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.address : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试联系人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.contactName : '--' }}</template>
        </el-table-column>
        <el-table-column label="新建面试人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.creatorName : '--' }}</template>
        </el-table-column>
        <el-table-column prop="liableName" label="招聘负责人" width="120px"/>
        <el-table-column label="招聘渠道" width="120px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['RecruitChannel']" :key="item.value" v-show="item.value === row.recruitChannel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="oaDeptName" label="用人部门" width="160px"/>
        <el-table-column prop="creator" label="创建人" min-width="100px"/>
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
      </el-table>

      <!-- 已淘汰 -->
      <el-table :data="tableList" size="small" class="tableList" v-show="params.state === '-1'">
        <el-table-column prop="name" label="姓名" min-width="120px" fixed="left">
          <template v-slot="scope">
            <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="recruitPostName" label="应聘职位" width="100px"/>
        <el-table-column prop="eliminateReason" label="淘汰原因" width="140px"/>
        <el-table-column prop="phone" label="手机号" width="120px"/>
        <el-table-column label="性别" width="100px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['SexType']" :key="item.value" v-show="item.value === row.sex">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" min-width="100px"/>
        <el-table-column label="工作经验" width="130px">
          <template v-slot="{row}">{{ row.workExperience ? row.workExperience + '年' : '--' }}</template>
        </el-table-column>
        <el-table-column label="期望月薪" width="120px">
          <template v-slot="{row}">
            <span v-if="row.salaryInterview === '1'">面谈</span>
            <span v-else>{{ row.expectSalaryStart }} ~ {{ row.expectSalaryEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学历" width="130px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['EducationLevel']" :key="item.value" v-show="item.value === row.eduLevel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="major" label="专业" width="160px"/>
        <el-table-column prop="graduatedSchool" label="毕业院校" width="120px"/>
        <el-table-column prop="lastWorkUnit" label="最近工作单位" width="160px"/>
        <el-table-column prop="lastPosition" label="最近职位" width="160px"/>
        <el-table-column prop="liveAddress" label="现居住地" width="120px"/>
        <el-table-column prop="email" label="邮箱" width="130px"/>
        <el-table-column prop="interviewNum" label="面试轮次" width="100px"/>
        <el-table-column prop="interviewEvaluateNum" label="面试评价数" width="100px"/>
        <el-table-column prop="lastInterviewDate" label="面试时间" width="100px"/>
        <el-table-column label="面试官" width="150px" :show-overflow-tooltip="true">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.interviewerNames : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试方式" width="100px">
          <template v-slot="{row}">
            <span v-if="row.lastInterviewRecord">
              <span v-for="item in dictMap['InterviewType']" :key="item.value" v-show="item.value === row.lastInterviewRecord.type">{{ item.name }}</span>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="面试地址" width="150px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.address : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试联系人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.contactName : '--' }}</template>
        </el-table-column>
        <el-table-column label="新建面试人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.creatorName : '--' }}</template>
        </el-table-column>
        <el-table-column prop="liableName" label="招聘负责人" width="120px"/>
        <el-table-column label="招聘渠道" width="120px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['RecruitChannel']" :key="item.value" v-show="item.value === row.recruitChannel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="oaDeptName" label="用人部门" width="160px"/>
        <el-table-column prop="creator" label="创建人" min-width="100px"/>
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
      </el-table>

      <!-- 备用人才库 -->
      <el-table :data="tableList" size="small" class="tableList" v-show="params.state === '-2'">
        <el-table-column prop="name" label="姓名" min-width="120px" fixed="left">
          <template v-slot="scope">
            <span class="primary" @click="openDetail(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标签" min-width="120px">
          <template v-slot="{row}">
            <div v-if="row.tagNames">
              <el-tag size="small" v-for="name in row.tagNames" :key="name">{{ name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="100px"/>
        <el-table-column prop="recruitPostName" label="应聘职位" width="100px"/>
        <el-table-column prop="phone" label="手机号" width="120px"/>
        <el-table-column label="性别" width="100px">
          <template v-slot="{row}">
            <!--            <span v-for="item in dictMap['SexType']" :key="item.value" v-show="item.value === row.sex">{{ item.name }}</span>-->
            {{ row.sex === '0' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" min-width="100px"/>
        <el-table-column label="工作经验" width="130px">
          <template v-slot="{row}">{{ row.workExperience ? row.workExperience + '年' : '--' }}</template>
        </el-table-column>
        <el-table-column label="期望月薪" width="120px">
          <template v-slot="{row}">
            <span v-if="row.salaryInterview === '1'">面谈</span>
            <span v-else>{{ row.expectSalaryStart }} ~ {{ row.expectSalaryEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学历" width="130px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['EducationLevel']" :key="item.value" v-show="item.value === row.eduLevel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="major" label="专业" width="160px"/>
        <el-table-column prop="graduatedSchool" label="毕业院校" width="120px"/>
        <el-table-column prop="lastWorkUnit" label="最近工作单位" width="160px"/>
        <el-table-column prop="lastPosition" label="最近职位" width="160px"/>
        <el-table-column prop="liveAddress" label="现居住地" width="120px"/>
        <el-table-column prop="email" label="邮箱" width="130px"/>
        <el-table-column prop="interviewNum" label="面试轮次" width="100px"/>
        <el-table-column prop="interviewEvaluateNum" label="面试评价数" width="100px"/>
        <el-table-column prop="lastInterviewDate" label="面试时间" width="100px"/>
        <el-table-column label="面试官" width="150px" :show-overflow-tooltip="true">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.interviewerNames : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试方式" width="100px">
          <template v-slot="{row}">
            <span v-if="row.lastInterviewRecord">
              <span v-for="item in dictMap['InterviewType']" :key="item.value" v-show="item.value === row.lastInterviewRecord.type">{{ item.name }}</span>
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="面试地址" width="150px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.address : '--' }}</template>
        </el-table-column>
        <el-table-column label="面试联系人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.contactName : '--' }}</template>
        </el-table-column>
        <el-table-column label="新建面试人" width="120px">
          <template v-slot="{row}">{{ row.lastInterviewRecord ? row.lastInterviewRecord.creatorName : '--' }}</template>
        </el-table-column>
        <el-table-column prop="liableName" label="招聘负责人" width="120px"/>
        <el-table-column label="招聘渠道" width="120px">
          <template v-slot="{row}">
            <span v-for="item in dictMap['RecruitChannel']" :key="item.value" v-show="item.value === row.recruitChannel">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="oaDeptName" label="用人部门" width="160px"/>
        <el-table-column prop="creator" label="创建人" min-width="100px"/>
        <el-table-column prop="createTime" label="创建时间" width="160px"/>
      </el-table>

      <div class="page-block">
        <el-pagination
            v-model:current-page="params.current"
            v-model:page-size="params.size"
            :page-sizes="[10, 20, 30, 40]"
            :small="true"
            :disabled="false"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :hide-on-single-page="true"
            @size-change="sizeChange"
            @current-change="currentChange"
        />
      </div>
    </div>

    <el-dialog v-model="dialogVisible" :title="formData.id ? '编辑候选人' : '添加候选人'" width="750px">
      <el-form :model="formData" :rules="rules" label-width="120px" size="small" :inline="false" ref="formRef">
        <el-row>
          <el-col :span="10">
            <el-form-item label="应聘职位" prop="recruitPostId">
              <el-select v-model="formData.recruitPostId" placeholder="请选择应聘职位">
                <el-option v-for="item in recruitPostList" :key="item.id" :value="item.id" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name" size="small" placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="formData.email" size="small" placeholder="请输入邮箱"/>
            </el-form-item>
            <el-form-item label="目前状态">
              <el-select v-model="formData.jobState" size="small" placeholder="请选择目前状态">
                <el-option v-for="item in dictMap['CandidateJobState']" :key="item.value" :value="item.value" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="现居住地">
              <el-input v-model="formData.liveAddress" size="small" placeholder="请输入现居住地"/>
            </el-form-item>
            <el-form-item label="最近工作单位">
              <el-input v-model="formData.lastWorkUnit" size="small" placeholder="请输入最近工作单位"/>
            </el-form-item>
            <el-form-item label="毕业院校">
              <el-input v-model="formData.graduatedSchool" size="small" placeholder="请输入毕业院校"/>
            </el-form-item>
            <el-form-item label="期望月薪">
              <el-input-number v-model="formData.expectSalaryStart" :disabled="formData.salaryInterview === '1'" :controls="false" :min="0" :max="9999999" style="width: 78px"/>
              &nbsp;&nbsp;-&nbsp;&nbsp;
              <el-input-number v-model="formData.expectSalaryEnd" :disabled="formData.salaryInterview === '1'" :controls="false" :min="0" :max="9999999" style="width: 78px"/>
              <el-checkbox label="面议" v-model="formData.salaryInterview" true-label="1" false-label="0" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="候选人状态">
              <el-select v-model="formData.state" placeholder="请选择候选人状态">
                <el-option v-for="item in stateList" :key="item.value" v-show="item.visible" :value="item.value" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="formData.phone" placeholder="请输入手机号"/>
            </el-form-item>
            <el-row style="margin-bottom: 18px">
              <el-col :span="11">
                <el-form-item label="性别" label-width="80px">
                  <el-radio-group v-model="formData.sex">
                    <!--                    <el-radio v-for="item in dictMap['SexType']" :key="item.value" :label="item.value" size="small">{{ item.name }}</el-radio>-->
                    <el-radio label="0" size="small">男</el-radio>
                    <el-radio label="1" size="small">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="年龄" label-width="80px">
                  <el-input-number v-model="formData.age" placeholder="请输入年龄" :controls="false" :min="0" :max="300"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="可到岗时间">
              <el-date-picker v-model="formData.arriveDate" type="date" placeholder="请选择到岗时间" size="small"/>
            </el-form-item>
            <el-form-item label="工作经验">
              <el-input-number v-model="formData.workExperience" placeholder="请输入工作经验" :controls="false" :min="0" :max="100"/>
            </el-form-item>
            <el-form-item label="最近职位">
              <el-input v-model="formData.lastPosition" placeholder="请输入最近职位"/>
            </el-form-item>
            <el-row style="margin-bottom: 18px">
              <el-col :span="12">
                <el-form-item label="学历" label-width="80px">
                  <el-select v-model="formData.eduLevel" placeholder="请选择学历">
                    <el-option v-for="item in dictMap['EducationLevel']" :key="item.value" :value="item.value" :label="item.name"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业" label-width="60px">
                  <el-input v-model="formData.major" placeholder="请输入专业"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="招聘渠道">
              <el-select v-model="formData.recruitChannel" placeholder="请选择招聘渠道">
                <el-option v-for="item in dictMap['RecruitChannel']" :key="item.value" :value="item.value" :label="item.name"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 18px">
          <el-col :span="8">
            <el-form-item label="照片">
              <el-upload
                  class="avatar-uploader"
                  :action="action"
                  :show-file-list="false"
                  :on-success="uploadSuccess"
                  :before-upload="beforeUpload"
                  :headers="headers"
              >
                <img v-if="formData.avatar" style="width: 100px;height: 100px" :src="formData.avatar" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                  <ele-Plus/>
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <div class="tips-data">
              <el-icon :size="15" color="var(--el-color-primary)">
                <ele-Tickets/>
              </el-icon>
              <span style="font-weight: bold;font-size: 15px;margin-left: 2px">原始简历</span>
            </div>
            <el-upload
                v-model:file-list="resumeFile"
                :action="action"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-exceed="handleExceed"
                :limit="1"
                :headers="headers"
            >
              <el-button type="" style="margin-top: 5px" :icon="Filter" size="small">选择文件</el-button>
              <template #tip>
                <div style="color: #AAA">支持pdf，doc，docx，html，txt，jpg，png等格式文件上传</div>
                <div style="color: #AAA">文件大小不超过10MB</div>
              </template>
            </el-upload>

            <div class="tips-data" style="margin-top: 10px">
              <el-icon :size="15" color="var(--el-color-primary)">
                <ele-Paperclip/>
              </el-icon>
              <span style="font-weight: bold;font-size: 15px;margin-left: 2px">附件</span>
            </div>
            <el-upload
                v-model:file-list="fileList"
                :action="action"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
                :headers="headers"
            >
              <el-button type="" style="margin-top: 5px" :icon="Filter" size="small">选择文件</el-button>
              <template #tip>
                <div style="color: #AAA">可上传作品集、笔试答卷、证书、证明等补充文件，支持各类格式文件</div>
                <div style="color: #AAA">文件大小不超过10MB</div>
              </template>
            </el-upload>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">关闭</el-button>
                  <el-button type="primary" @click="submitData(formRef)">保存</el-button>
                </span>
      </template>
    </el-dialog>

    <!-- 候选人详情 -->
    <candidate-detail v-model:dialogDrawer="dialogDetail" v-model:editVisible="dialogVisible" v-model:defaultForm="formData" v-model:dictMap="dictMap" v-model:stateList="stateList"></candidate-detail>
  </div>
</template>

<script>
import {ref, reactive, toRefs, onMounted, getCurrentInstance} from 'vue'
import {Filter} from '@element-plus/icons-vue'
import {getDictByCodes} from '/@/api/sys/dict'
import CandidateDetail from '../../components/CandidateDetail.vue'
import {getList} from '/@/api/oa/recruit/post'
import {getPage, createData, getStateList, editData} from '/@/api/oa/candidate'
import {Session} from '/@/utils/storage'

export default {
  name: 'oa-recruit-candidate',
  components: {
    CandidateDetail
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const formRef = ref()
    const state = reactive({
      action: '/api/file/filaAttach/upload',
      headers: {
        '17work': Session.get('token')
      },
      params: {
        current: 1,
        size: 10,
        search: null,
        recruitPostId: null,
        liableId: null,
        sex: null,
        minAge: null,
        maxAge: null,
        minWorkAge: null,
        maxWorkAge: null,
        eduLevel: null,
        graduatedSchool: null,
        lastWorkUnit: null,
        recruitChannel: null,
        interviewStartDate: null,
        interviewEndDate: null,
        creator: null,
        createSt: null,
        createEt: null,
        state: '0'
      },
      interviewDateRange: [],
      createDateRange: [],
      userList: [],   // 招聘负责人/面试官选择器数据列表
      stateList: [],  // 候选人状态列表
      topStateList: [],  // 排除已入职的候选人状态列表
      total: 0,
      tableList: [],
      dictMap: {},
      recruitPostList: [],  // 招聘职位列表
      dialogDetail: false,
      dialogVisible: false,
      formData: {},
      resumeFile: [], // 上传的简历文件
      rules: {
        recruitPostId: {required: true, message: '请选择应聘职位', trigger: 'change'},
        name: {required: true, message: '请填写姓名', trigger: 'blur'},
      },
      // 可隐藏且通用的字段
      header: [
        {
          name: '性别',
          label: 'sex'
        },
        {
          name: '年龄',
          label: 'age'
        }
      ],
      outState: {
        value: '-1',
        name: '淘汰',
        total: 0
      },
      backState: {
        value: '-2',
        name: '备用人才库',
        total: 0
      }
    })
    const initData = () => {
      try {
        getDictByCodes(['SexType', 'EducationLevel', 'RecruitChannel', 'CandidateJobState', 'InterviewType', 'StaffType']).then(res => state.dictMap = res.data)
        getList().then(res => state.recruitPostList = res.data)
        getStateList(1).then(res => {
          state.stateList = res.data
          for (let i = 0; i < state.stateList.length; i++) {
            if (state.stateList[i].value === '-1') {  // 已淘汰
              state.outState.total = state.stateList[i].total
              state.outState.name = state.stateList[i].name
            } else if (state.stateList[i].value === '-2') {  // 人才备用库
              state.backState.total = state.stateList[i].total
              state.backState.name = state.stateList[i].name
            } else {
              state.topStateList.push(state.stateList[i])
            }
          }
        })
      } catch (e) {
        console.log(e)
      }
    }
    const getTableList = () => {
      try {
        getPage(state.params).then(res => {
          state.tableList = res.data.records
          // 循环拼接初筛评估人(面试官)
          for (let i = 0; i < state.tableList.length; i++) {
            let item = state.tableList[i]
            if (item.interviewerList && item.interviewerList.length > 0) {
              item.interviewerNames = ''
              item.interviewerList.forEach(interviewer => {
                if (item.interviewerNames) {
                  item.interviewerNames += '，'
                }
                item.interviewerNames += interviewer.interviewerName
              })
            }
          }
          state.total = res.data.total
        })
      } catch (e) {
        console.log(e)
      }
    }
    const submitData = (formRef) => {
      formRef.validate((valid) => {
        if (!valid) {
          return false
        }
        const data = Object.assign({}, state.formData)
        if (data.salaryInterview === '1') {
          data.expectSalaryStart = data.expectSalaryEnd = null
        }
        try {
          createData(data).then(res => {
            state.dialogVisible = false
            getTableList()
          })
        } catch (e) {
          console.log(e)
        }
      })
    }
    const openCreate = () => {
      initForm()
      state.dialogVisible = true
    }
    const openDetail = (e) => {
      state.formData = e
      state.dialogDetail = true
    }
    const currentChange = (current) => {
      state.params.current = current
      getTableList()
    }
    const sizeChange = (size) => {
      state.params.size = size
      currentChange(1)
    }
    const resetParams = () => {
      state.params = {
        current: 1,
        size: state.params.size,
        search: null,
        recruitPostId: null,
        liableId: null,
        sex: null,
        minAge: null,
        maxAge: null,
        minWorkAge: null,
        maxWorkAge: null,
        eduLevel: null,
        graduatedSchool: null,
        lastWorkUnit: null,
        recruitChannel: null,
        interviewStartDate: null,
        interviewEndDate: null,
        creator: null,
        createSt: null,
        createEt: null,
        state: '0'
      }
      state.createDateRange = state.interviewDateRange = []
      getTableList()
    }
    const interviewDateChange = (dateArr) => {
      if (dateArr) {
        state.params.interviewStartDate = dateArr[0]
        state.params.interviewEndDate = dateArr[1]
      } else {
        state.params.interviewStartDate = state.params.interviewEndDate = null
      }
    }
    const createDateChange = (dateArr) => {
      if (dateArr) {
        state.params.createSt = dateArr[0]
        state.params.createEt = dateArr[1]
      } else {
        state.params.createSt = state.params.createEt = null
      }
    }
    const stateChange = (e) => {
      state.params.state = e
      getTableList()
    }
    const initForm = () => {
      state.formData = {
        id: null,
        recruitPostId: null,
        state: '0',
        name: null,
        avatar: null,
        phone: null,
        email: null,
        sex: null,
        age: null,
        jobState: null,
        arriveDate: null,
        arrivedAnytime: 0,
        liveAddress: null,
        workExperience: null,
        lastWorkUnit: null,
        lastPosition: null,
        graduatedSchool: null,
        eduLevel: null,
        major: null,
        expectSalaryStart: null,
        expectSalaryEnd: null,
        salaryInterview: '0', // 0薪资范围 1面议
        recruitChannel: null,
        resumeUrl: null
      }
    }
    onMounted(() => {
      initData()
      getTableList()
    })
    return {
      ...toRefs(state),
      Filter,
      formRef,
      initData,
      getTableList,
      submitData,
      openCreate,
      openDetail,
      resetParams,
      interviewDateChange,
      createDateChange,
      currentChange,
      sizeChange,
      stateChange,
      initForm
    }
  }
}

</script>

<style lang="scss" scoped>
.page-container {
  padding: 1px;

  :deep(.el-tabs__header) {
    margin: 0;
  }

  .tableList {
    border: 1px solid var(--el-table-border-color);
    border-bottom: none;

    :deep(thead .cell) {
      display: flex;
      align-items: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }
  }

  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }
  }

  :deep(.el-form-item) {
    align-items: flex-start;
  }

  .row-item {
    margin-bottom: 10px;

    :deep(.el-form-item:nth-child(2) .el-input__wrapper) {
      width: 116px;
    }
  }

  .stateCell {
    position: relative;
    padding: 5px 0;
    cursor: pointer;
    flex: auto;
    text-align: center;

    .state-num {
      padding-bottom: 2px;
      color: var(--el-text-color-regular);
      font-size: 18px;
    }

    .state-name {
      font-weight: normal;
      font-size: 15px;
      color: var(--el-text-color-primary);
    }

    &:hover {
      .state-num, .state-name {
        color: var(--el-color-primary);
      }
    }
  }

  .state-arrow {
    position: relative;
    height: 54px;
    display: block;
    width: 5px;

    &::before {
      content: "";
      position: absolute;
      right: 0;
      top: 5px;
      bottom: 0;
      border-right: 1px solid var(--el-border-color-light);
    }

    &::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-top: 1px solid var(--el-border-color-light);
      border-right: 1px solid var(--el-border-color-light);
      transform: rotate(45deg);
      background: var(--next-color-white);
      top: 48%;
      right: -3px;
      border-top-right-radius: 2px;
    }
  }

  .state-active {
    .state-num, .state-name {
      color: var(--el-color-primary);
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 50px;
      margin: 0 auto;
      border-bottom: 2px solid var(--el-color-primary);
    }
  }

  .avatar-uploader {
    :deep .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      text-align: center;
    }
  }

  .tips-data {
    display: flex;
    align-items: center;

    &:last-child {
      height: unset;
      margin-top: 0;
    }
  }
}

:deep(.is-never-shadow) {
  border: none;
  margin-top: 9px;
}
</style>
